<template>
	<view class="page">
		<view class="bar_info" :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx'}">
			<view class="title_bar">
				<view class="title_bar_left" @tap.stop="isBack">
					<u-icon size="38" color="#000" name="arrow-left"></u-icon>
				</view>
				<view class="title_bar_center">
					<text>帮好友开账户</text>
				</view>
				<view class="title_bar_right"></view>
			</view>
		</view>
		<view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
		<view class="input_list">
			<view class="input_item">
				<view class="input_item_value">
					<view class="input_item_left">
						<text class="input_item_left_1">用户名</text>
						<text class="input_item_left_2">*</text>
					</view>
					<view class="input_item_right">
						<u-input v-model="nickname" height="42"input-align="right" class="input" type="text" placeholder="请输入用户名" maxlength="10" placeholder-style="color:#999;font-size:30rpx;" />
					</view>
				</view>
				<view class="input_item_value">
					<view class="input_item_left">
						<text class="input_item_left_1">手机号</text>
						<text class="input_item_left_2">*</text>
					</view>
					<view class="input_item_right">
						<u-input v-model="mobile" height="42"input-align="right" class="input" type="number" placeholder="请输入手机号" maxlength="11" placeholder-style="color:#999;font-size:30rpx;" />
						
					</view>
				</view>
				<view class="input_item_value no_border">
					<view class="input_item_left">
						<text class="input_item_left_1">密码</text>
						<text class="input_item_left_2">*</text>
					</view>
					<view class="input_item_right">
						<u-input v-model="password" height="42"input-align="right" class="input" type="password" placeholder="请输入密码(6-12位数字+字母)" maxlength="11" placeholder-style="color:#999;font-size:30rpx;" />
						
					</view>
				</view>
			</view>
		</view>
		<view class="confirm_btn" @tap.stop="confirm">确认</view>
	</view>
</template>

<script>
	import {
		validate
	} from '@/common/utils/validate.js'
	export default {
		data() {
			return {
				nickname: "",
				mobile: "",
				password: ""
			}
		},
		onLoad() {
			
		},
		methods: {
			confirm() {
				if (!this.nickname) {
					this.$message.info('请输入用户名');
					return false;
				}
				if (!validate(this.mobile, 'require')) {
					this.$message.info('手机号不能为空');
					return false;
				}
				if (!validate(this.mobile, 'phone')) {
					this.$message.info('请输入正确的手机号');
					return false;
				}
				if (!validate(this.password, 'require')) {
					this.$message.info('密码不能为空');
					return false;
				}
				if (!validate(this.password, 'password')) {
					this.$message.info('请输入6-12位字母+数字密码');
					return false;
				}
				this.$api.post(global.apiUrls.postHelpRegister, {
					nickname: this.nickname,
					mobile: this.mobile,
					password: this.password
				}).then(res => {
					this.$message.info(res.data.msg);
					if (res.data.code == 1) {
						setTimeout(() => {
							uni.navigateBack();
						}, 800)
					}
				})
				
			},
			isBack() {
				uni.navigateBack();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		/deep/.u-input {
			padding: 0;
		}
		.bar_info {
			width: 750rpx;
			height: 88rpx;
			overflow: hidden;
			// border-bottom: 1px solid #eee;
			// background: #fff;
			z-index: 10;
			position: fixed;
			top: 0rpx;
		
			.title_bar {
				padding: 0 32rpx;
				display: flex;
				justify-content: space-between;
		
				.title_bar_left {
					width: 50rpx;
					display: flex;
					align-items: center;
				}
		
				.title_bar_center {
					line-height: 88rpx;
					font-size: 36rpx;
					font-weight: 400;
				}
		
				.title_bar_right {
					width: 50rpx;
				}
			}
		}
		.input_list {
			padding: 30rpx;
			position: relative;
		
			.input_item {
				padding: 0 30rpx;
				background: #fff;
				border-radius: 20rpx;
				margin-bottom: 24rpx;
		
				.input_item_value {
					display: flex;
					padding: 40rpx 0;
					border-bottom: 1rpx solid #eee;
		
					.input_item_left {
						width: 170rpx;
		
						.input_item_left_1 {
							font-size: 30rpx;
							margin-right: 8rpx;
						}
		
						.input_item_left_2 {
							font-size: 30rpx;
							color: #CC0000;
						}
					}
		
					.input_item_right {
						width: calc(100% - 170rpx);
						display: flex;
						text-align: right;
						align-items: center;
		
						.input {
							width: 100%;
						}
		
						.input_item_right_icon {
							width: 30rpx;
							margin-left: 8rpx;
						}
					}
				}
				.input_item_value_other {
					padding: 40rpx 0;
					border-bottom: 1rpx solid #eee;
					.other_title {
						display: flex;
						.input_item_left {
							width: 170rpx;
							.input_item_left_1 {
								font-size: 30rpx;
								margin-right: 8rpx;
							}
							.input_item_left_2 {
								font-size: 30rpx;
								color: #CC0000;
							}
						}
								
						.input_item_right {
							width: calc(100% - 170rpx);
							display: flex;
							text-align: right;
							align-items: center;
								
							.input {
								width: 100%;
							}
								
							.input_item_right_icon {
								width: 30rpx;
								margin-left: 8rpx;
							}
						}
					}
					.other_img {
						width: 100%;
						height: 180rpx;
						margin-top: 24rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
				}
		
				.no_border {
					border-bottom: 1rpx solid #fff;
				}
			}
		
			.add_view {
				width: 187rpx;
				height: 61rpx;
				position: absolute;
				left: 50%;
				bottom: 0rpx;
				transform: translateX(-50%);
				z-index: 99;
		
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.confirm_btn {
			width: 610rpx;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			background: #BDD9FD;
			border-radius: 22rpx;
			font-size: 32rpx;
			color: #fff;
			margin: 432rpx auto 0;
		}
	}
</style>